<template>
	<eui-popup ref="DeliveryCancelPopup" background-color="#fff" :type="type" :mask-click="false">
		<view class="popup-content">
			<view class="popup-title flex just-between">
				<view style="font-weight: bold;">
					请选择取消配送原因
				</view>
				<bcm-close-btn @click="close" />
			</view>
			<scroll-view scroll-y="true" style="padding: 8rpx 8rpx 8rpx 30rpx;box-sizing: border-box;height: 50vh;"
				class="text-left">
				<view>
					<radio-group @change="selectItem">
						<view style="margin-top: 20rpx;line-height: 35rpx"
							v-for="item in deliveryCancelReasonTypeList" :key="item.code">
							<radio :value="item.code" :checked="orderDeliveryCancelReasonType1 === item.code">
								{{ item.name }}
							</radio>
						</view>
					</radio-group>
					<textarea placeholder="请输入原因"
						style="border: 1px solid #ccc; width: 95%; border-radius: 10rpx; margin-top: 20rpx; padding: 20rpx; box-sizing: border-box"
						v-if="reasonItem?.mustInputFlag == '1'" @input="inputChange"></textarea>

				</view>
			</scroll-view>
			<slot></slot>
		</view>
	</eui-popup>
</template>
<script>
import BcmCloseBtn from '../../components/BcmCloseBtn.vue';
import { getBcmUrl, bcmRequest } from '../../../../hooks/bcmServices';

export default {
	name: "DeliveryCancelPopup",
	props: {
		scope: {
			type: Object,
			default: {}
		},
		type: {
			type: String,
			default: 'bottom'
		},
		show: {
			type: Boolean,
			default: false
		},
		orderDeliveryCancelReasonType: {
			type: String,
			default: ''
		},
		billType: {
			type: String,
			default: '1'
		},
	},
	components: {
		BcmCloseBtn
	},
	watch: {
		show: {
			handler(val) {
				if (val) {
					this.$refs.DeliveryCancelPopup.open('bottom');
					this.getList()
				} else {
					this.close()
				}
			},
		},
		orderDeliveryCancelReasonType: {
			handler(val) {
				this.orderDeliveryCancelReasonType1 = val
			},
		}
	},
	data() {
		return {
			orderDeliveryCancelReasonType1: '',
			deliveryCancelReasonTypeList: [],
			reasonItem: null
		}
	},
	methods: {
		close() {
			this.$refs.DeliveryCancelPopup.close(); 
			this.orderDeliveryCancelReasonType1 = '';
			this.reasonItem = null
			this.$emit('close');
			
		},
		selectItem(e) {
			let item = this.deliveryCancelReasonTypeList.find(v => v.code == e.detail.value);
			this.orderDeliveryCancelReasonType1 = e.detail.value;
			this.reasonItem = item;
			this.$emit('select', item)
		},
		inputChange(e) {
			this.$emit('inputchange', e)
		},
		async getList() {
			const bcmUrl = getBcmUrl()
			let ObjectData = {
				billId: this.billType == '1' ? this.scope.orderId : this.scope.afsOrderId,
				billType: this.billType,
				chnlCode: this.scope.chnlCode,
				operateType: '4',
				storeCode: this.scope.storeCode
			}
			const response = await bcmRequest(bcmUrl.orderApi, '订单表', 'QueryReasonList', ObjectData);
			this.deliveryCancelReasonTypeList = response?.list?.sort((a, b) => a.rowNo - b.rowNo > 0);
		}
	}
}
</script>
<style lang="scss" scoped>
@import "@/static/font/enjoyicon/iconfont.css";
@import "../../common/common.css";

.popup-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background-color: #fff;

  .popup-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100rpx;
    padding-right: 36rpx;
    padding-left: 30rpx;
    font-size: 33rpx;
    line-height: 100rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }

  .bottom-1 {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    height: 70rpx;
    padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
    background: $uni-bg-color;
  }
}
</style>
